<%@ page import="com.goal98.team.Constants" %><pw:lib/>
<div class="dialog1" style="margin:3px 0px">
  <table>
    <tbody>
      <tr class="prop">
        <td valign="top" class="name"><g:message code="activity.costs" default="Costs"/>:</td>

        <td valign="top" style="text-align: left;" class="value">
          <script type="text/javascript">
            document.observe('dom:loaded', loadCosts);


            function loadCosts() {
              var url = '${createLinkTo(dir:'/teamActivity/costsAjax')}';
              var options = {
                method:'post',
                parameters:{
                  activityId:'${activityInstance.id}'
                },
                onSuccess:function(transport) {

                  $('totalCost').innerHTML = transport.responseJSON.totalCost;
                  $('costOfEachPerson').innerHTML = transport.responseJSON.costOfEachPerson;
                  $('costList').innerHTML = renderCostList(transport.responseJSON.costs);
                }

              }
              new Ajax.Request(url, options);
            }

            function renderCostList(json) {
              var result = '<ul>';
              for (x = 0; x < json.length; x++) {
                var cost = json[x]

                var costHtml = '<li>' + cost.description + ':' + cost.amount + '</li>';
                result += costHtml;
              }
              result += '</ul>';
              return result;

            }
          </script>
          <div id="costList">
          </div>
        </td>

      </tr>

      <tr class="prop">
        <td valign="top" class="name"><g:message code="activity.totalCost" default="Total Cost"/>:</td>

        <td valign="top" class="value">
          <div id="totalCost">
            <g:formatNumber number="${activityInstance?.totalCost}"/>
          </div>
        </td>

      </tr>

      <g:ifAnyGranted role="${Constants.ROLE_TEAM_ADMIN}">

        <tr class="prop">
      <td valign="top" class="name"></td>
      <td valign="top" class="value">
        <pw:popButton submitFunction="submitIt"
                windowWidth="250"
                windowHeight="160"
                buttonLabel="${message(code:'activity.addCost', 'default':'Add Cost')}"
                submitLabel="${message(code:'button.save','default':'Save') }"
                cancelLabel="${message(code:'button.cancel','default':'Cancel') }">

          <h1><g:message code="activity.addCost" default="Add Cost"/></h1>
          <g:hiddenField name="activityId" value="${activityInstance.id}"/>
          <table style="border:0px">
            <tbody>
              <tr>
                <td><g:message code="transaction.amount" default="Amount"/></td>
                <td><input name="amount" id="amount" type="text" value="0"/></td>
              </tr>
              <tr>
                <td><g:message code="transaction.desc" default="Description"/></td>
                <td><input name="description" id="description" type="text" value="场地费"/></td>
              </tr>
            </tbody>
          </table>
          <script type="text/javascript">

            function checkData() {
              if (isNaN($('amount').value)) {
                alert('${message(code: 'activity.addCost.message.amount.NaN', 'default': 'Amount is not a Number.')}');
                return false;
              }
              return true;

            }

            function submitIt() {
              if (!checkData()) {
                return;
              }
              new Ajax.Request('${createLinkTo(dir:'/teamActivity/addCost')}', {
                method:'post',
                parameters:{
                  activityId:$('activityId').value,
                  amount:$('amount').value,
                  description:$('description').value
                },
                onSuccess:function(transport) {
                  var win = Windows.focusedWindow;
                  win.updateHeight();
                  new Effect.Fade(win.getId());
                  //                            alert(transport.responseText);
                  win.close();
                  loadCosts();
                  return true;
                },
                onFailure:function(transport) {
                  alert(transport.responseText);
                }
              });

              return false;
            }
          </script>
        </pw:popButton>
        </td>

      </g:ifAnyGranted>
    </tr>

    </tbody>
  </table>

</div>